<template>
<div>
  <section class="todoapp">
      <header class="header">
          <h1>vue3 todos</h1>
          <input type="text" class="new-todo" placeholder="想做的事" @keyup.enter="addTodo" v-model="newTodo">
      </header>
  </section>
  <section class="main">
      <ul class="todo-list">
          <li v-for="(todo,index) in todos" :key="todo.id" class="todo">
              <div class="view">
                  <lable>{{todo.title}}</lable>
                  <button class="destroy" @click="deteleTodo(index)"></button>
              </div>
          </li>
      </ul>
  </section>
</div>
</template>

<script>
import { reactive,toRefs } from 'vue'
export default {
    setup () {
        const state = reactive({
            newTodo:'',
            todos: [
                {id:1,title:'吃饭',complate:false},
                {id:2,title:'睡觉',complate:false},
                {id:3,title:'打豆豆',complate:false}
            ]
        })
        function addTodo() {
            let value = state.newTodo && state.newTodo.trim()
            if(!value) return ;
            state.todos.push({
                id:state.todos.length + 1,
                title: value,
                complated:false,
            })
            state.newTodo = ''
        }
        function deteleTodo(index) {
            state.todos.splice(index,1)
        }
        return {
            ...toRefs(state),
            addTodo,
            deteleTodo
        }
    }
}
</script>

<style>

</style>